<template>
  <div class="app-container">
    <local-loading :loading="loading"></local-loading>
    <div class="search-container">
      <el-form :inline="true" :model="queryParams">
        <el-form-item :label="$t('study.Semester')">
          <el-select v-model="queryParams.semester">
            <el-option
              v-for="dict in semesters"
              :key="dict.value"
              :label="translateTagDictI18n('semesters', dict.label)"
              :value="dict.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="keywords" :label="$t('study.Kursname')">
          <el-input
            v-model="queryParams.keywords"
            :placeholder="$t('study.placeholder')"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery"
            ><i-ep-search style="margin-right: 5px" />{{
              $t("study.Suche")
            }}</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="" @click="init"
            ><el-icon style="font-size: 16px; margin-right: 5px">
              <Refresh />
            </el-icon>
            {{ $t("study.Zurücksetzen") }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="30">
      <el-col v-for="(course, index) in CourseList" :key="index" :span="6">
        <el-card
          class="box-card"
          :body-style="{ padding: '0px' }"
          @click="showTask(course.id)"
        >
          <el-image :src="course.wallpaperUrl" class="courseImage" />
          <div style="padding: 2px" class="msxx">
            <span style="font-weight: bold; font-size: 1.5rem">{{
              course.name
            }}</span>
            <div class="bottom clearfix yylc">
              <p style="font-size: 1.1rem; margin-top: 4px">
                {{ $t("study.Einheit") }}：{{ course.deptName }}
              </p>
              <p style="font-size: 1.1rem; margin-top: 4px">
                {{ $t("study.NamedesLehrers") }}：{{ course.leaderName }}
              </p>
              <p style="font-size: 1.1rem; margin-top: 4px">
                {{ $t("study.AssoziierterName") }}：{{
                  course.assistants.length == 0
                    ? $t("study.KeinLehrer")
                    : course.assistants.toString()
                }}
              </p>
              <p style="font-size: 1.1rem; margin-top: 4px">
                {{ $t("study.ProfessorKlasse") }}：{{
                  course.classes.length == 0
                    ? $t("study.KeineKlasse")
                    : course.classes.toString()
                }}
              </p>
              <p style="font-size: 1.1rem; margin-top: 4px">
                {{ $t("study.Startzeit") }}：{{ course.startTime }}
              </p>
              <!-- <p style="font-size: 1.1rem; margin-top: 4px">
                {{ $t("study.Endzeit") }}：{{ course.endTime }}
              </p> -->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <empty-state
      v-if="CourseList?.length == 0"
      :name="'暂无课程'"
    ></empty-state>
    <!-- 分页 -->
    <pagination
      v-if="total > 0"
      v-model:total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="handleQuery"
    />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Study",
  inheritAttrs: false,
});
// 状态管理依赖
import { useStudyStore } from "@/store/modules/study";
import { getStudyCoursePage } from "@/api/course";
import { CoursePageVO, CourseQuery } from "@/api/course/types";
import LocalLoading from "@/components/LocalLoading/index.vue";
import EmptyState from "@/components/EmptyState/index.vue";
import { translateTagDictI18n } from "@/utils/i18n";
// 路由
import router from "@/router";
import { useUserStore } from "@/store/modules/user";
const userStore = useUserStore();
// 字典
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { semesters } = proxy?.useDict("semesters"); // 多页
const total = ref(0);
const CourseList = ref<CoursePageVO[]>();
const skeletonloding = ref(true); // 骨架屏加载
const loading = ref(true);
const studyStore = useStudyStore();
// 获取课程请求数据
const queryParams = reactive<CourseQuery>({
  pageNum: 1,
  pageSize: 10,
});
// 搜索函数
function handleQuery() {
  skeletonloding.value = true; // 骨架屏加载
  loading.value = true;
  getStudyCoursePage(queryParams)
    .then(({ data }) => {
      CourseList.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      skeletonloding.value = false;
      loading.value = false;
    });
}
// 重置函数
function init() {
  queryParams.semester = "";
  queryParams.keywords = "";
  ElMessage.success("重置成功");
  handleQuery();
}
// 显示课程任务
function showTask(courseId: number) {
  studyStore.studyCourse(courseId).then(() => {
    let routeData = router.resolve({
      path: "/studyinfo",
      query: {
        courseId,
      },
    });
    window.open(routeData.href, "_blank");
  });
}
// 进来就搜
onMounted(() => {
  handleQuery(); //首先查询
});

onActivated(() => {
  if (!userStore.codeId || userStore.codeId == "") {
    router.push("/me/personal").then(() => {
      ElMessage.warning("请先完善个人信息");
    });
  }
});
</script>

<style lang="scss" scoped>
.search-container {
  margin-top: 15px;
}

.addcourse {
  position: absolute;
  /* 绝对定位，相对于最近的定位祖先元素 */
  right: 50px;
  /* 左边距为0，即贴近左边 */
  border-radius: 20px;
  font-weight: bolder;

  .el-icon {
    font-size: 16px;
  }
}

.msxx {
  font-size: 10px;
}

.box-card {
  border: 1px solid #ccc;
  /* 添加这一行 */
  border-radius: 10px;
  /* 添加这一行 */
  width: 23rem;
  padding: 16px 16px 8px 16px;
  /* 添加这一行 */
  // height: 225px;
  cursor: pointer;
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image {
  width: 100%;
  height: 130px;
  border-radius: 10px;
  /* 添加这一行 */
}

.courseImage {
  width: 100%;
  border-radius: 6%;
  // height: 130px;
}

.el-card {
  margin: 20px auto;
  box-shadow: inset;
}

.yylc {
  p {
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
</style>
